<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css"/>
    <link href="/style/common_style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js`"></script>
    <script type="text/javascript" src="/js/jquery-form/jquery.form.min.js"></script>
    <script>
        //权限移动
        $(function () {
            //将左边全部提交到右边
//            moveAll("selectAll","all_permissions","self_permissions");
//            //将右边全部提交到左边
//            moveAll("deselectAll","self_permissions","all_permissions");
//
//            move("select","all_permissions","self_permissions");
//
//            move("deselect","self_permissions","all_permissions");

            $("#selectAll").click(function () {
                $("#all_permissions option").appendTo($("#self_permissions"));
            });

            $("#deselectAll").click(function () {

                $("#self_permissions option").appendTo($("#all_permissions"))
            })

            $("#select").click(function () {
                $("#all_permissions option:selected").appendTo($("#self_permissions"))
            })

            $("#deselect").click(function () {
                $("#self_permissions option:selected").appendTo($("#all_permissions"))

            })






            $("#mselectAll").click(function () {
                $("#all_menus option").appendTo($("#self_menus"));
            });

            $("#mdeselectAll").click(function () {

                $("#self_menus option").appendTo($("#all_menus"))
            })

            $("#mselect").click(function () {
                $("#all_menus option:selected").appendTo($("#self_menus"))
            })

            $("#mdeselect").click(function () {
                $("#self_menus option:selected").appendTo($("#all_menus"))

            })




            //去掉所有的权限列表中已经选择的权限
            //获取右边所有的option 的id
            var mids = $("#self_menus option").map(function (index,item) {
                return $(item).val();

            });

            $("#all_menuss option").each(function (index,item) {

                if($.inArray($(item).val(),mids) > -1){
                    $(item).remove()
                }
            });


            //去掉所有的权限列表中已经选择的权限
            //获取右边所有的option 的id
            var pids = $("#self_permissions option").map(function (index,item) {
                return $(item).val();

            });

            $("#all_permissions option").each(function (index,item) {

                if($.inArray($(item).val(),pids) > -1){
                    $(item).remove()
                }
            });


            //选中提交的option
            //selectorupdate("self_permissions")

            //将最右seleclet中所有optionshue设置为全部设置为选中
            $("#editForm").submit(function () {
                //将最右seleclet中所有optionshue设置为全部设置为选中
                $("#self_menus option").each(function (index,item) {
                    $(item).prop("selected",true)
                });
                $("#self_permissions option").each(function (index,item) {
                    $(item).prop("selected",true)
                });
            });


            //将表单使用ajax提交
            $("#editForm").ajaxForm(function (data) {
                //弹出框,提示操作成功
                var dialog = $.dialog({
                    title:"提示",
                    content:data.msg,
                });
                //如果保存成功跳转回list
                if(data.success){
                    dialog.button({
                        name:"确定" ,
                        callback:function () {
                            window.location.href = "/role/list.do";
                    }});
                }else{
                    dialog.button({name:"确定"})
                }
            });
        });
    </script>

</head>
<body>
<form name="editForm" action="/role/saveorupdate.do" method="post" id="editForm">
    <input type="hidden" value="${role.id}" name="id">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">=角色编辑</span>
                <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">角色编号</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${role.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">角色编号</td>
                    <td class="ui_text_lt">
                        <input  name="name" value="${role.name}" class="ui_input_txt02"/>
                    </td>
                </tr>

                <tr>
                    <td class="ui_text_rt" width="140">权限</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select multiple="true" class="ui_multiselect01" id="all_permissions" >
                                        <c:forEach items="${permissions}" var="c">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:forEach>

                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="select" value="-->" class="left2right"/><br/>
                                    <input type="button" id="selectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="deselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="deselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select multiple="true" name="ids" class="ui_multiselect01"  id="self_permissions" >
                                        <c:forEach items="${role.permissions}" var="c">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td class="ui_text_rt" width="140">菜单</td>
                    <<td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select multiple="true" class="ui_multiselect01" id="all_menus" >
                                        <c:forEach items="${menus}" var="c">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:forEach>

                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="mselect" value="-->" class="left2right"/><br/>
                                    <input type="button" id="mselectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="mdeselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="mdeselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select multiple="true" name="menuIds" class="ui_multiselect01"  id="self_menus" >
                                        <c:forEach items="${role.menus}" var="c">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <td class="ui_text_lt">
                    &nbsp;<input type="submit" value="确定保存" class="ui_input_btn01"/>
                    &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                </td>


            </table>
        </div>
    </div>
</form>
</body>
</html>
